iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
1
自我挑戰組

網頁學習雜記系列 第 17

Day 17 | 就是不保持安全社交距離 - inline-block 空白

  • 分享至 

  • xImage
  •  

今天就來整理,如何消除使用 inline-block 時,
那個惱人的安全社交距離吧(痾不是啦,是空白間距)。

怕有人不理解我在講什麼,
我先上範例檔讓大家知道是什麼情況。

範例檔

HTML

<ul>
  <li>就是這個 -></li>
  <li><- 就是這個</li>
  <li><- 就是這個</li>
  <li><- 就是這個</li>
</ul>

CSS

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

ul{
  text-align: center;
}

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
}

會產生這主要的原因就是 lili 之間的空白字元,
以下整理一些常見的解決方式

1. 刪除他

最簡單暴力的方式,就是不要讓他有空格,所以 HTML 就會變成以下這樣

<ul>
  <li>就是這個 -></li><li><- 就是這個</li><li><- 就是這個</li><li><- 就是這個</li>
</ul>

但這個方法其實對於 HTML 的結構閱讀性來說並不是一個太好的作法

2. 註解掉他

其實這個方式跟前一個滿接近的啦,但算是保持了 HTML 的結構,但又多了些多餘的東西

<ul>
   <li>就是這個 -></li><!--
--><li><- 就是這個</li><!--
--><li><- 就是這個</li><!--
--><li><- 就是這個</li>
</ul>

3. margin 掉他

這個方法不會去動到 HTML 的結構,
但是這方法,因應字型的關係,設定的值一般會落在 4-5px 之間,
並不是一個太精準的作法,像我自己的範例,我試到快 6px 才能消除掉。

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
  margin-right: -6px; /* 或是設定 margin-left */
}

4. 0 掉他

這應該是這幾種作法裡面,我唯一會用的作法了,
父層設定字體大小 font-size: 0,空白字元自然不佔空間,
這個比較麻煩的就是內容子層要另外設定字體大小。

ul{
  text-align: center;
  font-size: 0;
}

li{
  padding: 5px 10px;
  display: inline-block;
  color: #fff;
  background-color: steelblue;
  font-size: 16px;
}

當然你也可以偷懶,父層直接設定 display: flex 直接沒有這個問題,
或是你深愛 float,不過記得要清除浮動,
但如果你堅持想使用 inline-block
這幾種作法可以幫助你解決那些煩人的空白字元,
今天就先到這裡啦~
我們明天見。


上一篇
Day 16 | 欸!不要這麼浮動好不好
下一篇
Day 18 | 還是保持一點安全距離好惹 - li 分隔線
系列文
網頁學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言